<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			background: #aaa;
			text-align: center;
		}
		canvas{
			background: #fff;
		}
	</style>
</head>

<body>
	<canvas id="cans" width="800px" height="800px">
		
	</canvas>
	<input type="button" id="btn" value="清空画布" name="">
	<input type="color" id="color" name="">
	
  <script>
		window.onload=function(ev){
			let clear = document.getElementById('btn');
			let cans=document.getElementById('cans');
			let oColor=document.getElementById('color');
			let cs=cans.getContext('2d');
			
			cs.font='50px 宋体';
			cs.fillText('ABC',100,100);
			cs.strokeText('DEF',200,200);
		}
  </script>
</body>
</html>
